<template>
  <div class="container">
    <div class="left-line">
    </div>
    <div class="circle" :style="{color: businessTrip.colorValue}">
      <i class="fa fa-plane"></i>
    </div>
    <div class="content">
      <i class="fa fa-caret-left fa-3x caret-left"></i>
      <h2 v-text="formateDate(businessTrip.tripDate)" :style="{color: businessTrip.colorValue}"></h2>
      <div class="tripper-warp">
        <i class="fa fa-users"></i>
        <span v-text="businessTrip.tripper"></span>
      </div>
      <div class="place-warp">
        <i class="fa fa-map-marker"></i>
        <span v-text="businessTrip.tripPlace"></span>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  export default{
    props:['businessTrip'],
    methods:{
      formateDate(date) {
        return moment(date).format('YYYY-MM-DD')
      }
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    position: relative;
    display: block;
    min-height: 40px;
    padding: 10px 20px 5px;
    .left-wrapper{
    }
    .left-line{
      position: absolute;
      height: 100%;
      left: 25px;
      top: 0;
      border-left: 1px solid #dddee1;
    }
    .circle{
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      top:32px;
    }
    .content{
      background: #fff;
      margin-left: 30px;
      padding: 10px;
      position: relative;
      border-radius: 5px;
      .caret-left{
        position: absolute;
        left: -10px;
        color: #fff;
        top: 5px
      }
      h2{
        @include fz(5.5px);
        color: #0074D9;
      }
      .tripper-warp{
        color:#80848f;
        margin: 10px;
        @include flex-left;
        i {
          @include fz(4px);
          line-height: 2;
        }
        span{
          margin: 0 0 0 5px;
          display: -webkit-box;
          text-overflow:ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          @include fz(5.5px)
        }
      }
      .place-warp{
        color:#80848f;
        margin: 10px;
        i{
          @include fz(4px);
          padding:3px;
          color: #0074D9;
        }
        span{
          margin: 0 0 0 5px;
          @include fz(5.5px)
        }
      }
    }
  }
</style>
